import ToolTips from '@/components/ToolTips';
import './StockStatus.scss';
import { useState } from 'react';
type ThisProps = {
  in_stock: string;
  stock_qty: number;
  status: string;
  onlyIcon?: boolean;
};
const StockStatus = ({ in_stock, stock_qty, status, onlyIcon }: ThisProps) => {
  const [showTips, setShowTips] = useState(false);
  const [tipsText, setTipsText] = useState('');
  const handleHover = (text: string) => {
    setTipsText(text);
    setShowTips(true);
  };
  const handleLeave = () => {
    setShowTips(false);
  };
  return (
    <div
      className={
        'product-stock-status ' +
        (in_stock == '1' ? 'in-stock' : 'out-of-stock')
      }
    >
      {in_stock == '1' ? (
        stock_qty >= 20 ? (
          <>
            <span
              className="iconfont icon-check"
              // title="In stock"
              onPointerOver={() => handleHover('In stock')}
              onPointerLeave={handleLeave}
            />
            {!onlyIcon && <span>Stock: {stock_qty}</span>}
          </>
        ) : (
          <>
            {/* <span className="iconfont icon-clock" title="Limited Stock" /> */}
            <span
              className="iconfont icon-clock"
              // title="Limited Stock"
              onPointerOver={() => handleHover('Limited Stock')}
              onPointerLeave={handleLeave}
            />
            {!onlyIcon && <span>Stock: {stock_qty}</span>}
          </>
        )
      ) : (
        <>
          <span
            className="iconfont icon-stop"
            // title="Out of stock"
            onPointerOver={() => handleHover('Out of stock')}
            onPointerLeave={handleLeave}
          />
          {!onlyIcon && <span>Out of stock</span>}
        </>
      )}
      <ToolTips text={tipsText} show={showTips} />
    </div>
  );
};

export default StockStatus;
